<template>
  <XenPageLayout title="参与详情" title-align="left">
    <view class="detail-container">
      <!-- 活动详情 -->
      <view class="detail-card">
        <view class="section">
          <view class="section-title">活动详情</view>
          <view class="info-item">
            <text class="label">活动名称</text>
            <text class="value">{{
              participationDetail.Entity?.Activity?.ActivityName || ""
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">开始时间</text>
            <text class="value">{{
              formatDateTime(participationDetail.Entity?.Activity?.StartTime) ||
              "暂无"
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">结束时间</text>
            <text class="value">{{
              formatDateTime(participationDetail.Entity?.Activity?.EndTime) ||
              "暂无"
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">活动状态</text>
            <text class="value">{{
              participationDetail.Entity?.Activity?.ActivityStatus || ""
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">创建人</text>
            <text class="value">{{
              participationDetail.Entity?.Activity?.CreateBy || ""
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">创建时间</text>
            <text class="value">{{
              formatDateTime(
                participationDetail.Entity?.Activity?.CreateTime,
              ) || "暂无"
            }}</text>
          </view>
        </view>
      </view>

      <!-- 活动参与信息 -->
      <view class="detail-card">
        <view class="section">
          <view class="section-title">参与信息</view>
          <view class="section-content" v-if="hasParticipationDetail">
            <view class="info-item">
              <text class="label">参与者类型</text>
              <text class="value">{{
                participationDetail.Entity?.ParticipantType || ""
              }}</text>
            </view>
            <view class="info-item">
              <text class="label"> 姓名/公司名 </text>
              <text class="value">{{
                participationDetail.Entity?.Name || ""
              }}</text>
            </view>
            <view class="info-item">
              <text class="label">联系电话</text>
              <text class="value">{{
                participationDetail.Entity?.Phone || ""
              }}</text>
            </view>
            <view class="info-item">
              <text class="label">详细地址</text>
              <text class="value">{{
                participationDetail.Entity?.Address || ""
              }}</text>
            </view>
            <view class="info-item">
              <text class="label">描述</text>
              <text class="value">{{
                participationDetail.Entity?.Description || ""
              }}</text>
            </view>
            <view class="info-item">
              <text class="label">提交时间</text>
              <text class="value">{{
                formatDateTime(participationDetail.Entity?.CreateTime) || ""
              }}</text>
            </view>

            <!-- 图片展示 -->
            <view
              class="images-container"
              v-if="participationImages.length > 0"
            >
              <text class="images-title"
                >上传的图片 ({{ participationImages.length }}张)</text
              >
              <view class="images-list">
                <view
                  class="image-item"
                  v-for="(img, imgIndex) in participationImages"
                  :key="imgIndex"
                >
                  <image
                    class="activity-image"
                    :src="getImageUrl(img.FileId)"
                    mode="aspectFill"
                    @tap="previewImage(participationImages, imgIndex)"
                  ></image>
                </view>
              </view>
            </view>
          </view>
          <view class="section-content" v-if="!hasParticipationDetail">
            <view class="empty-participation">
              <text class="empty-text">暂无参与记录</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </XenPageLayout>
</template>

<script lang="ts" setup>
import XenPageLayout from "@/layouts/XenPageLayout.vue";
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { SysActivityParticipationApi } from "./api";
import { formatDateTime } from "../../../utils/xenUtils";
import type { IGetResult } from "./api/interface";

// 参与记录ID
const participationId = ref<string>("");
// 活动参与详情
const participationDetail = ref<IGetResult>({} as IGetResult);

// 处理图片展示
const participationImages = computed(() => {
  return participationDetail.value.SelectedActivityImagesIds || [];
});

// 判断是否有参与详情
const hasParticipationDetail = computed(() => {
  return (
    participationDetail.value.Entity &&
    Object.keys(participationDetail.value.Entity).length > 0
  );
});

// 获取图片URL
const getImageUrl = (fileId: string) => {
  return `${import.meta.env.VITE_BASE_URL}/api/_file/getfile/${fileId}`;
};

// 获取页面参数
onLoad((options) => {
  if (options && options.Id) {
    participationId.value = options.Id;
    fetchParticipationDetail();
  } else {
    uni.showToast({
      title: "缺少参与记录ID参数",
      icon: "none",
    });
  }
});

// 获取活动参与详情
const fetchParticipationDetail = async () => {
  if (!participationId.value) return;

  try {
    const res = await SysActivityParticipationApi().get(participationId.value);

    // 直接使用返回的数据，不需要解包
    if (res) {
      participationDetail.value = res;
    }
  } catch (error) {
    uni.showToast({
      title: "获取活动参与详情失败",
      icon: "none",
    });
  }
};

// 预览图片
const previewImage = (images: any[], index: number) => {
  if (!images[index] || !images[index].FileId) {
    uni.showToast({
      title: "图片无效",
      icon: "none",
    });
    return;
  }

  // 将所有图片ID转换为完整的URL数组
  const imageUrls = images.map((img) => getImageUrl(img.FileId));

  // 预览图片
  uni.previewImage({
    urls: imageUrls,
    current: index,
    fail: (err) => {
      console.error("图片预览失败:", err);
      uni.showToast({
        title: "预览图片失败",
        icon: "none",
      });
    },
  });
};
</script>

<style lang="scss" scoped>
.detail-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 30rpx;
}

.detail-card {
  background-color: #fff;
  border-radius: 16rpx;
  margin: 20rpx 20rpx 0;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.section {
  padding: 30rpx;

  .section-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    position: relative;
    padding-left: 20rpx;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 8rpx;
      height: 30rpx;
      width: 6rpx;
      background-color: #b88e67;
    }
  }
}

.info-item {
  display: flex;
  margin-bottom: 16rpx;

  .label {
    width: 160rpx;
    font-size: 26rpx;
    color: #666;
    flex-shrink: 0;
  }

  .value {
    flex: 1;
    font-size: 26rpx;
    color: #333;
    word-break: break-all;
  }
}

.images-container {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 2rpx solid #f5f7fa;

  .images-title {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 12rpx;
    display: block;
  }

  .images-list {
    display: flex;
    flex-wrap: wrap;

    .image-item {
      width: 160rpx;
      height: 160rpx;
      margin-right: 16rpx;
      margin-bottom: 16rpx;
      border-radius: 8rpx;
      overflow: hidden;

      .activity-image {
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
      }
    }
  }
}

.empty-participation {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}
</style>
